<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix='sec' uri='http://www.springframework.org/security/tags'%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type="text/javascript" src="scripts/boot.js"></script>
<style type="text/css">
	.item{
		width: 95px;
		display: inline-block;
		margin-left: 5px;
	}
</style>
</head>
<body style="border: 0px; margin: 0px; padding: 0px;width: 100%;height: 100%">
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
		<table style="width:100%;">
			 <tr>
			   	<td style="width:30%;">
			   	  <span class="item">开始时间：</span>
			      <input id="t1" class="mini-datepicker" emptyText="请选择..." style="width:160px;" format="yyyy-MM-dd HH:mm:ss" allowInput="false" timeFormat="HH:mm:ss" showTime="true" /> 
			    </td>
			    <td style="width:30%;">
			      <span class="item">截止时间：</span>
			      <input id="t2" class="mini-datepicker" emptyText="请选择..." style="width:160px;" format="yyyy-MM-dd HH:mm:ss" allowInput="false" timeFormat="HH:mm:ss" showTime="true" />
			    </td>
			    <td style="width:30%;">
			      <span class="item">分机号码：</span>
			      <input id="serialNum" emptyText="请输入分机号码" class="mini-textbox" style="width:160px;"/> 
			    </td>
			    <td style="width:30%;"> </td>
			 </tr>
			 <tr>
			   	<td style="width:30%;" colspan="3">
			   	  <span class="item">呼出号码(模糊)：</span>
			      <input id="callNum" emptyText="请输入呼出号码" class="mini-textbox" style="width:160px;"/> 
			    </td>
			    <td style="white-space:nowrap;"><a class="mini-button" iconCls="icon-search" onclick="search()">查询</a> </td>
			 </tr>
		</table>          
	</div>
	<div class="mini-toolbar" style="border-bottom:0;padding:0px;">
	    <table style="width:100%;">
	        <tr>
	            <td style="width:100%;">
	            	<sec:authorize url='/call_records_export_current.do'>
	                <a class="mini-button" iconCls="icon-download" onclick="exportCurrent()">导出当前</a>
	                </sec:authorize>
	                <sec:authorize url='/call_records_export_all.do'>
                    <a class="mini-button" iconCls="icon-download" onclick="exportAll()">导出全部</a>
                    </sec:authorize>
	            </td>
	        </tr>
	    </table>           
	</div>
	<div class="mini-fit" >
		<div id="datagrid1" class="mini-datagrid" idField="id" pageSize="20" url="call_records_list.do" onload="loadSucc" style="width:100%;height:92%;">
			<div property="columns">
				<div type="indexcolumn"></div>
				<div field="extension" width="10%" headerAlign="center" align="center">分机号码</div>
				<div field="callNum" width="15%" headerAlign="center" align="center">呼出号码</div>
				<div field="typeValue" width="15%" headerAlign="center" align="center">计费类型</div>
				<div field="fee" width="9%" headerAlign="center" align="center">话费</div>
				<div field="callTime" width="20%" headerAlign="center" align="center" allowSort="true" dataType="date" dateFormat="yyyy-MM-dd HH:mm:ss">呼叫时间</div>
				<div field="endTime" width="20%" headerAlign="center" align="center" allowSort="true" dataType="date" dateFormat="yyyy-MM-dd HH:mm:ss">挂机时间</div>
				<div field="seconds" width="11%" headerAlign="center" align="center">呼叫时长(秒)</div>
			</div>
		</div>
		<div class="mini-toolbar" style="height: 6.5%;font-size: medium;">
			话费合计：<span id="fee" style="color: red;"></span>元
		</div>
	</div>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
grid.load();

function search() {
	var t1 = mini.get("t1").getFormValue();
	var t2 = mini.get("t2").getFormValue();
	var t3 = mini.get("serialNum").getFormValue();
	var t4 = mini.get("callNum").getFormValue();
    grid.load({ callTime:t1,endTime:t2,extension:t3,callNum:t4 });
}

//合计
function loadSucc(){
	var t1 = mini.get("t1").getFormValue();
	var t2 = mini.get("t2").getFormValue();
	var t3 = mini.get("serialNum").getFormValue();
	var t4 = mini.get("callNum").getFormValue();
	$.post("call_records_sum.do",{ callTime:t1,endTime:t2,extension:t3,callNum:t4 },function(data){
		$("#fee").text(data.sum);
	},"json");
}

//导出当前
function exportCurrent(){
 	var data = grid.data;
    var ids = [];
    $.each(data , function(){
        ids.push(this.id);
    });
    var id = ids.join(',');
    location.href="call_records_export_current.do?id="+id;
}
//导出所有
function exportAll(){
	var t1 = mini.get("t1").getFormValue();
	var t2 = mini.get("t2").getFormValue();
	var t3 = mini.get("serialNum").getFormValue();
	var t4 = mini.get("callNum").getFormValue();
    location.href="call_records_export_all.do?callTime="+t1+"&endTime="+t2+"&extension="+t3+"&callNum="+t4;
}
</script>
</body>
</html>